<template>
  <div v-if="data">
    <div class="body">
      <!-- 主页面中间 -->
      <div class="main">
        <!-- 左侧主详情 -->
        <div class="main-left-not">
          <div class="main-left">
            <!-- 左侧上方内容 -->
            <div class="left-up">
              <div class="up-l">
                <img :src="data.coverImgUrl" alt="" />
              </div>
              <div class="up-r">
                <div class="r-1">
                  <span> 歌单 </span>
                  <span
                    class="addcube"
                    style="
                      width: 8px;
                      height: 24px;
                      border-top: 12px solid #fff;
                      border-right: 5px solid #fff;
                      border-bottom: 12px solid #fff;
                      border-left: 5px solid red;
                      box-sizing: border-box;
                    "
                  >
                  </span>
                  <div class="r-1-name">{{ data.name }}</div>
                </div>
                <div class="r-2">
                  <img :src="data.creator.avatarUrl" alt="" />
                  <span class="r-2-1"
                    ><router-link :to="`/userhome/${data.creator.userId}`">{{
                      data.creator.nickname
                    }}</router-link></span
                  >
                  <span class="r-2-2"
                    >{{
                      moment(data.createTime).format("YYYY-MM-DD")
                    }}
                    创建</span
                  >
                </div>
                <div class="r-3">
                  <span class="r-3-1">
                    <a href="" class="el-icon-video-play" @click=""> 播放</a>
                    <a href="" class="r-3-1-2">+</a>
                  </span>
                  <span class="r-3-2">
                    <a href="" class="el-icon-folder-add">
                      <span
                        >({{ Math.ceil(data.subscribedCount / 10000) }}万)</span
                      >
                    </a>
                  </span>
                  <span class="r-3-3">
                    <a href="" class="el-icon-share">
                      <span>({{ data.shareCount }})</span>
                    </a>
                  </span>
                  <span class="r-3-4">
                    <a href="" class="el-icon-download">
                      <span>下载</span>
                    </a>
                  </span>
                  <span class="r-3-5">
                    <a href="" class="el-icon-s-comment">
                      <span>({{ data.commentCount }})</span>
                    </a>
                  </span>
                </div>
                <div class="r-4">
                  <b>标签：</b>
                  <span
                    class="r-4-1"
                    v-for="(item, index) in data.tags"
                    :key="index"
                  >
                    <router-link
                      style="color: #333"
                      :to="`/playlist?cat=${item}`"
                      >{{ item }}</router-link
                    >
                  </span>
                </div>
                <div class="r-5" style="white-space: pre-line">
                  {{ data.description.substring(start, 50) }}
                </div>
                <div
                  :class="{ active: click }"
                  class="r-x"
                  style="white-space: pre-line"
                >
                  {{ data.description.substring(50, end) }}
                </div>
                <div class="r-6" @click="click = !click">
                  展开<i class="el-icon-arrow-down"></i>
                </div>
              </div>
            </div>
            <!-- 左侧中间内容 -->
            <div class="left-center">
              <div class="left-center-h">
                <div class="h-left">
                  <span class="h-left-1">歌曲列表</span>
                  <span class="h-left-2">{{ data.trackCount }}首歌</span>
                </div>
                <div class="h-right">
                  <a href="" class="el-icon-service"> 生成外链播放器 </a>
                  <span class="h-left-3"
                    >播放: <i>{{ data.playCount }}</i
                    >次</span
                  >
                </div>
              </div>
              <div class="left-center-c">
                <table>
                  <thead
                    style="
                      box-shadow: 1px 3px 1px #ccc;
                      background-image: linear-gradient(#fff, #d3d3d3);
                    "
                  >
                    <tr class="tr-1">
                      <th class="th-1">&nbsp;</th>
                      <th class="th-2">歌曲标题</th>
                      <th class="th-3">时长</th>
                      <th class="th-4">歌手</th>
                      <th class="th-5">专辑</th>
                    </tr>
                  </thead>
                  <tbody class="tbody-1">
                    <tr
                      class="tr-2"
                      v-for="({ id, name, ar, al, dt }, index) in data.tracks"
                      :key="id"
                    >
                      <td class="td-1">
                        <span>
                          {{ index + 1 }}
                        </span>

                        <span class="el-icon-video-play"></span>
                      </td>
                      <td class="td-2" @click="getId(index)">
                        {{ name }}
                      </td>
                      <td class="td-3">{{ moment(dt).format("mm:ss") }}</td>
                      <td class="td-4">
                        <router-link
                          style="color: black"
                          :to="`/singerdetails/${ar[0].id}`"
                        >
                          {{ ar[0].name }}
                        </router-link>
                      </td>
                      <td class="td-5">{{ al.name }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="xiazai">
                <span>查看更多内容,请下载客户端</span><br />
                <router-link to="/songclient">立即下载</router-link>
              </div>
            </div>
            <!-- 左侧下方内容 -->
            <div class="left-down">
              <div class="down-header">
                <span class="header-1">评论</span>
                <span class="header-2">共(178)条评论</span>
              </div>
              <div class="down-body">
                <div>
                  <span class="pinglun">精彩评论</span>
                  <hr />
                  <div class="body-0">
                    <div><img src="/ceshi_picture/3-1.jpg" alt="" /></div>
                    <div>
                      <div class="body-1-top">
                        <a href="">虚怀若谷 </a>：
                        <span>
                          总有人以为自己是中世纪的骑士，可以拥有名望和公主，其实大概率只会降生在奴隶的家庭，生来便由人鞭笞，看王子公主们鲜衣怒马，生杀予夺。
                        </span>
                      </div>
                      <div class="body-0-down">
                        <div class="y111">2022年2月8日</div>
                        <div class="y222">
                          <a href="" class="el-icon-thumb">
                            <span>(905) </span>
                          </a>
                          |
                          <a href="" class="y222-2">
                            <span> 回复</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="body-1">
                    <div><img src="/ceshi_picture/3-1.jpg" alt="" /></div>
                    <div>
                      <div class="body-1-top">
                        <a href="">虚怀若谷 </a>：
                        <span>
                          总有人以为自己是中世纪的骑士，可以拥有名望和公主，其实大概率只会降生在奴隶的家庭，生来便由人鞭笞，看王子公主们鲜衣怒马，生杀予夺。
                        </span>
                      </div>
                      <div class="body-1-down">
                        <div class="y111">2022年2月8日</div>
                        <div class="y222">
                          <a href="" class="el-icon-thumb">
                            <span>(905)</span>
                          </a>
                          |
                          <a href="" class="y222-2">
                            <span>回复</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <br />
              <div class="down-foot">
                <div>
                  <span>最新评论(178)</span>
                  <hr />
                  <div class="body-0">
                    <div><img src="/ceshi_picture/3-1.jpg" alt="" /></div>
                    <div>
                      <div class="body-1-top">
                        <a href="">虚怀若谷 </a>：
                        <span>
                          总有人以为自己是中世纪的骑士，可以拥有名望和公主，其实大概率只会降生在奴隶的家庭，生来便由人鞭笞，看王子公主们鲜衣怒马，生杀予夺。
                        </span>
                      </div>
                      <div class="body-0-down">
                        <div class="y111">2022年2月8日</div>
                        <div class="y222">
                          <a href="" class="el-icon-thumb">
                            <span>(905)</span>
                          </a>
                          |
                          <a href="" class="y222-2">
                            <span>回复</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="body-1">
                    <div><img src="/ceshi_picture/3-1.jpg" alt="" /></div>
                    <div>
                      <div class="body-1-top">
                        <a href="">虚怀若谷 </a>：
                        <span>
                          总有人以为自己是中世纪的骑士，可以拥有名望和公主，其实大概率只会降生在奴隶的家庭，生来便由人鞭笞，看王子公主们鲜衣怒马，生杀予夺。
                        </span>
                      </div>
                      <div class="body-1-down">
                        <div class="y111">2022年2月8日</div>
                        <div class="y222">
                          <a href="" class="el-icon-thumb">
                            <span>(905)</span>
                          </a>
                          |
                          <a href="" class="y222-2">
                            <span>回复</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fenye">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <!-- 右侧组件边栏 -->
        <div class="main-right">
          <div class="main-right-body">
            <div class="right-like">
              <div class="like-heade">
                <span>喜欢这个歌单的人</span>
              </div>
              <div class="like-body-all">
                <ul class="like-body">
                  <li
                    v-for="({ avatarUrl }, index) in data.subscribers"
                    :key="index"
                  >
                    <img
                      @click="togglebox"
                      style="width: 100%"
                      :src="avatarUrl"
                      alt=""
                    />
                    <vodal :show="show" animation="rotate" @hide="show = false">
                      <div>
                        個人信息：
                        {{ index }}
                        <img :src="avatarUrl" />
                      </div>
                    </vodal>
                  </li>
                </ul>
              </div>
            </div>
            <div class="right-song">
              <div class="hot-anchor">
                <span>热门歌单</span>
              </div>
              <ul class="song-ul">
                <li
                  v-for="({ coverImgUrl, creator, name, id }, index) in related"
                  :key="index"
                >
                  <img :src="coverImgUrl" alt="" />
                  <div class="anchor-details">
                    <p class="details-1">
                      <router-link :to="`/musiclistdetails/${id}`">{{
                        name
                      }}</router-link>
                    </p>
                    <p class="details-2">
                      by <a href="">{{ creator.nickname }}</a>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="right-download">
              <h3>
                <span>网易云音乐多端下载</span>
              </h3>
              <router-link to="/songclient">
                <ul class="download-ul">
                  <li class="download-li-1">
                    <a href="" class="download-a-1">
                      <img src="/ceshi_picture/r-3.png" alt="" />
                    </a>
                  </li>
                  <li class="download-li-2">
                    <a href="" class="download-a-2">
                      <img src="/ceshi_picture/r-4.png" alt="" />
                    </a>
                  </li>
                  <li class="download-li-3">
                    <a href="" class="download-a-3">
                      <img src="/ceshi_picture/r-5.png" alt="" />
                    </a>
                  </li>
                </ul>
              </router-link>
            </div>
            <p class="tongbu">同步歌单,随时畅听320k好音乐</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vodal from "vodal";
import dialogComponent from "@/components/dialogComponent.vue";
import moment from "moment";
import { mapMutations, mapState } from "vuex";
// import { createLogger } from "vuex"
export default {
  name: "name",
  components: {
    Vodal,
  },
  props: ["id"],
  computed: {
    ...mapState(["playList1", "trackIds"]),
  },
  data() {
    return {
      moment: moment,
      data: null,
      click: false,
      related: null,
      comment: null,
      // Visiable: false,
      show: false,
    };
  },
  mounted() {
    console.log(this.id);
    this.getData();
    this.getRelated();
    // this.getComment();
  },
  methods: {
    ...mapMutations(["setTrackIds"]),
    getSongDetail() {
      if (this.trackIds.length == 0) {
        return;
      }
      let urlStr = this.trackIds.toString();
      this.axios.get("song/detail?ids=" + urlStr).then((res) => {
        console.log(JSON.stringify(res.data));
        this.songsDetail = res.data.songs;
        for (var i = 0 ; i < this.songsDetail.length; i++) {
          this.songIds.push(this.songsDetail[i].al.id);
        }
        console.log(this.songsDetail[0]);
      });
    },
    togglebox: function () {
      this.show = true;
    },
    // handleClick(data) {
    //   this.Visiable = true;
    //   this.$nextTick(() => {
    //     //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
    //     //init调用的是dialog-component组件里面的init方法
    //     //data是传递给弹窗页面的值
    //     this.$refs.dialog.init(data);
    //   });
    // },
    ...mapMutations(["updateplayList1"]),
    // 获取歌曲id
    getId(index) {
      // this.playList1 = this.playList1.concat(this.data.tracks[index])
      let newArr = [...this.playList1, this.data.tracks[index]];
      console.log([...this.playList1, this.data.tracks[index]]);
      this.$router.push("/footerMusic");
      this.updateplayList1(newArr);
    },
    getData() {
      this.axios.get(`/playlist/detail?id=${this.id}`).then((res) => {
        console.log(res);
        this.data = res.data.playlist;
        this.setTrackIds(this.data.trackIds);
      });
    },
    getRelated() {
      this.axios.get(`/related/playlist?id=${this.id}`).then((res) => {
        console.log(res);
        this.related = res.data.playlists;
      });
    },
    // getComment() {
    //   this.axios.get(`/comment/playlist?id=${this.id}`).then((res) => {
    //     console.log(res);
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
@import "../../node_modules/vodal/common.css";
@import "../../node_modules/vodal/rotate.css";
</style>
<style lang="scss" scoped>
.body {
  display: flex;
  background-color: #f5f5f5;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.main {
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  width: 1100px;
  display: flex;
}
.main-left-not {
  border-right: 1px solid #d3d3d3;
  padding: 47px 30px 40px 39px;
}
.main-left {
  /* border: 1px solid red; */
  width: 750px;
}

/* 左上开始 */
.left-up {
  width: 100%;
  display: flex;
}
.up-l {
  width: 208px;
  height: 208px;
  background-position: 0 -1285px;
}
.up-l img {
  width: 100%;
}
.up-r {
  display: inline-block;
  margin-left: 25px;
  width: 100%;
  line-height: 24px;
  /* text-align: left; */
}
.r-1 {
  height: 25px;
  margin: 0 0 12px;
}
.r-1-name {
  margin-left: 60px;
}
.r-1 > span {
  width: 54px;
  height: 24px;
  background-image: linear-gradient(rgb(245, 76, 76), rgb(161, 3, 3));
  color: #fff;
  text-align: center;
  font-size: 12px;
  float: left;
}
.r-1 > div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 500px;
  font-size: 20px;
}
.r-1 > span > i {
  display: inline-block;
  top: 2px;
  border: #333333;
  left: 34px;
}
.r-2 {
  display: block;
  width: 400px;
  // margin: 0 0 20px;
  line-height: 35px;
}
.r-2 > img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.r-2-1 > a {
  color: #0c73c2;
}
.r-2-2 {
  margin-left: 15px;
  color: #999999;
}
.r-3 {
  display: flex;
  margin-right: -10px;
  line-height: 50px;
  margin-top: 20px;
}
.r-3-1 {
  display: flex;
  padding: 0 5px 0 0;
}
.r-3-1 > .el-icon-video-play {
  color: #fff;
  text-align: center;
  display: block;
  width: 61px;
  line-height: 31px;
  height: 31px;

  border-radius: 5px 0px 0px 5px;
  background-image: linear-gradient(#3f99de, #1070b9);
}
.r-3-1 > .el-icon-video-play:hover {
  background-image: linear-gradient(#63aae0, #478bbf);
}
.r-3-1-2 {
  color: #fff;
  text-align: center;
  display: block;
  width: 31px;
  height: 31px;
  // vertical-align: center;
  line-height: 31px;
  border-radius: 0px 5px 5px 0px;
  font-weight: bold;
  background-image: linear-gradient(#3f99de, #1070b9);
  border-left: 2px solid rgb(131, 131, 131);
  // margin: 0 5px 0 -3px;
}
.r-3-1-2:hover {
  background-image: linear-gradient(#63aae0, #478bbf);
}
.r-3-2 {
  margin-right: 6px;
  display: inline-block;
  width: 72px;
  border-radius: 3px;
  border: 1px solid rgb(196, 196, 196);
  font-size: 12px;
  text-align: center;
  height: 30px;
  line-height: 32px;
}
.el-icon-folder-add {
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.el-icon-folder-add > span {
  font-size: 12px;
  font-weight: 500;
}
.r-3-3 {
  margin-right: 6px;
  display: inline-block;

  width: 60px;
  height: 30px;
  line-height: 32px;
  border-radius: 3px;
  border: 1px solid rgb(196, 196, 196);
  font-size: 12px;
  text-align: center;
}
.r-3-3 > .el-icon-share {
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.r-3-3 > .el-icon-share > span {
  font-size: 12px;
  font-weight: 500;
}

.r-3-4 {
  margin-right: 6px;
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 32px;
  border-radius: 3px;
  border: 1px solid rgb(196, 196, 196);
  font-size: 12px;
  text-align: center;
}
.el-icon-download {
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.el-icon-download > span {
  font-size: 12px;
  font-weight: 500;
}

.r-3-5 {
  height: 30px;
  line-height: 32px;
  margin-right: 6px;
  display: inline-block;
  width: 65px;
  border-radius: 3px;
  border: 1px solid rgb(196, 196, 196);
  font-size: 12px;
  text-align: center;
}
.el-icon-s-comment {
  color: #333;
  font-weight: bold;
  font-size: 15px;
}
.el-icon-s-comment > span {
  font-size: 12px;
  font-weight: 500;
}

.r-4 {
  margin: 25px 0 0 0;
}
.r-4-1 {
  display: inline-block;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 5px;
  text-align: center;
  line-height: 22px;
  padding: 2px 8px;
  margin: 0 10px 3px 0;
}

.r-4-2 {
  display: inline-block;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 15px;
  text-align: center;
  width: 78px;
  line-height: 22px;
  margin: 0 10px 3px 0;
}
.r-4-2 > a {
  text-shadow: 0 1px #fdfdfd;
  color: #666;
  font-size: 12px;
}

.r-4-3 {
  display: inline-block;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 15px;
  text-align: center;
  width: 50px;
  line-height: 22px;
  margin: 0 10px 3px 0;
}
.r-4-3 > a {
  text-shadow: 0 1px #fdfdfd;
  color: #666;
  font-size: 12px;
}

.r-5 {
  margin-top: 5px;
  line-height: 18px;
  color: #666;
  font-size: 12px;
  // height: 15px;
  overflow: hidden;
}
.r-6 {
  cursor: pointer;
  display: block;
  float: right;
  margin-right: 40px;
}
.r-x {
  color: #666;
  font-size: 12px;
  display: none;
}
.active {
  color: #666;
  font-size: 12px;
  display: block;
}
/* 左上结束 */

/* 左中开始 */
.left-center {
  margin-top: 27px;
  font-size: 12px;
  color: #333;
}
.left-center-h {
  display: block;
  border-bottom: 2px solid #c20c0c;
  height: 26px;
  padding: 0 0 2px 0;
}
.h-left {
  float: left;
}
.h-right {
  float: right;
}
.h-left-1 {
  font-size: 21px;
}
.h-left-2 {
  color: #666;
  margin: 9px 0 0 20px;
}
.h-right > .el-icon-service {
  margin: 5px 20px 0 0;
  text-decoration: underline;
}
.h-left-3 {
  margin-top: 5px;
  color: #666;
}
.h-left-3 > i {
  color: #c20c0c;
}

table,
th,
tr {
  border: 1px solid rgb(204, 204, 204);
  box-shadow: 0 0 1px 0 rgba(204, 204, 204, 204);
}
.left-center-c {
  width: 100%;
  height: 100%;
}
.left-center-c > table {
  border-collapse: collapse;
  table-layout: fixed;
  box-sizing: border-box;
  text-align: left;
  font-weight: normal;
  background-color: #f7f7f7;
}
.left-center-c > table > thead {
  display: table-header-group;
  vertical-align: middle;
  color: #666;
}
.left-center-c > table > thead > tr {
  display: table-row;
  height: 38px;
}
.left-center-c > table > thead > tr > th {
  padding: 8px 10px;
}
.tr-1 > .th-1 {
  width: 74px;
}
.tr-1 > .th-2 {
  width: 235px;
}
.tr-1 > .th-3 {
  width: 111px;
}
.tr-1 > .th-4 {
  width: 15%;
}
.tr-1 > .th-5 {
  width: 21%;
}

.tbody-1 {
  display: table-row-group;
  vertical-align: middle;
  width: 100%;
}
.tbody-1 > tr {
  height: 30px;
}
.tbody-1 > tr > td {
  padding: 15px 20px;
}
.tbody-1 > .tr-2 > .td-1 {
  width: 100px;
}
.td-1 > .el-icon-video-play {
  margin-left: 50px;
}
.td-1 > span {
  display: inline-block;
  width: 15px;
}
/* 左中结束 */

.xiazai {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: -10px;
  font-size: 13px;
}
.xiazai > a {
  width: 120px;
  height: 30px;
  background-image: linear-gradient(90deg, #ff5a4c 0%, #ff1d12 100%);
  border-radius: 18px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}

/* 左下开始 */
.left-down {
  margin-top: 40px;
  font-size: 12px;
  color: #333;
}
.down-header {
  display: block;
  width: 100%;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
  margin: 0 0 20px 0;
}
.down-header > .header-1 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}
.down-header > .header-2 {
  margin: 9px 0 0 20px;
}
.pinglun {
  height: 20px;
  font-weight: bold;
}
.down-body {
  display: flex;
}
.down-body > div > img {
  width: 50px;
  height: 50px;
}
.body-r > div > input {
  border: 1px solid black;
  height: 50px;
  width: 655px;
}
.body-r-d {
  display: flex;
  justify-content: space-between;
}
.body-0 {
  display: flex;
  height: 71px;
  padding: 15px 0 15px 0;
}
.body-0-down {
  display: flex;
  justify-content: space-between;
  margin: 16px 0px 0px;
}
.body-1 {
  display: flex;
  height: 51px;
  border-top: 1px dotted #ccc;
  padding: 15px 0 15px 0;
}
.body-1-top {
  font-size: 12px;
  line-height: 17px;
  margin-left: 8px;
}
.body-1-down {
  display: flex;
  justify-content: space-between;
  margin: 10px 0px 0px;
}
.y111 {
  color: #999999;
  text-align: right;
}
.y222 > a > span {
  color: #333333;
}
.y222-2 {
  color: #666666;
}
/* 左下结束*/
.fenye {
  margin: 20px 0;
  text-align: center;
}

/* 右边栏开始 */
.main-right {
  width: 100%;
  height: 100%;
  zoom: 1;
  font-size: 12px;
  color: #333;
}
.main-right-body {
  padding: 20px 40px 40px 30px;
}
.right-like {
  margin-bottom: 25px;
}
.like-heade {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
.like-body-all {
  display: flex;
  width: 100%;
  height: 100%;
  margin-left: -6px;
  flex-wrap: wrap;
}
.like-body > li {
  float: left;
  padding: 0 0 12px 12px;
  width: 40px;
  height: 40px;
}

.hot-anchor {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-weight: bold;
}
.song-ul {
  margin-bottom: 25px;
}
.song-ul > li {
  display: inline-flex;
  width: 200px;
  height: 50px;
  margin-bottom: 15px;
  line-height: 24px;
}
.anchor-details {
  margin-left: 10px;
  line-height: 24px;
  width: 200px;
  height: 50px;
}
.details-1 > a {
  display: inline-block;
  width: 155px;
  height: 25px;
  font-size: 14px;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.details-2 {
  color: #999;
}
.details-2 > a {
  color: #999;
}

.right-download {
  margin: 20px 0;
  padding-bottom: 20px;
  font-size: 12px;
  color: #333;
}
.right-download > h3 {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-weight: bold;
}
.download-ul {
  display: inline-flex;
  margin-bottom: 0;
}
.download-li-1,
.download-li-3 {
  display: block;
  width: 42px;
  height: 48px;
}
.download-li-2 {
  display: block;
  width: 120px;
  height: 48px;
  text-align: center;
}
.tongbu {
  color: #999;
}
</style>
